<template>
  <view class="index">
    <view class="center">
      <view class="ind_from">
        <view class="row">
          <view class="label">持仓价</view>
          <view class="value">
            <input
              v-model="costing.ownPrice"
              type="number"
              class="uni-input"
              focus
              placeholder=""
            />
            元
          </view>
        </view>
        <view class="row">
          <view class="label">持仓股数</view>
          <view class="value">
            <input
              v-model="costing.ownCount"
              class="uni-input"
              type="number"
              focus
              placeholder=""
            />
            股
          </view>
        </view>
        <view class="row">
          <view class="label">补仓价</view>
          <view class="value">
            <input
              v-model="costing.coverPrice"
              class="uni-input"
              type="number"
              focus
              placeholder=""
            />
            元
          </view>
        </view>
        <view class="row">
          <view class="label">补仓股数</view>
          <view class="value">
            <input
              v-model="costing.coverCount"
              class="uni-input"
              type="number"
              focus
              placeholder=""
            />
            股
          </view>
        </view>
      </view>
      <view class="btn" @click="submit">开始测算</view>
      <view v-if="showResult" class="result">
        <view class="title">持仓盈亏比为</view>
        <view class="desc"
          >补仓后浮盈亏：<text class="strong">{{ result.afterPrice }}</text
          >元</view
        >
        <view class="desc"
          >补仓后成本价：<text class="strong">{{ result.afterCost }}</text
          >元</view
        >
        <view class="desc"
          >补仓后股票数：<text class="strong">{{ result.afterCount }}</text
          >股</view
        >
      </view>
      <view class="sub_text">
        <view class="p red">温馨提示：以上信息仅供参考！</view>
      </view>
      <view class="pub_ad_banner">
        <!-- #ifdef MP-TOUTIAO -->
        <ad
          :unit-id="adBannerIdDouyin"
          :ad-intervals="30"
          :fixed="false"
          type="banner"
          scale="100"
        />
        <!-- #endif -->
        <!-- #ifdef MP-KUAISHOU -->
        <ad :type="100011054" :unit-id="adBannerIdKuaishou"></ad>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
import {
  adVideoCreate,
  adVideoShow,
  showAdConfirmModal,
  adBannerIdDouyin,
  adBannerIdKuaishou,
} from "@/common/ad";
export default {
  data() {
    return {
      adBannerIdDouyin: adBannerIdDouyin,
      adBannerIdKuaishou: adBannerIdKuaishou,
      showResult: false,
      isUnlock: false,
      costing: {
        ownPrice: 10.5,
        ownCount: 1000,
        coverPrice: 8,
        coverCount: 1000,
      },
      result: {
        data: "",
        afterPrice: "",
        afterCost: "",
        afterCount: "",
      },
    };
  },
  onLoad(option) {
    adVideoCreate();
  },
  methods: {
    calculateCurrentStockPrice(
      holdingPrice,
      holdingShares,
      additionalPrice,
      additionalShares
    ) {
      // 计算总成本
      const totalHoldingCost = holdingPrice * holdingShares;
      const totalAddCost = additionalPrice * additionalShares;
      const totalCost = totalHoldingCost + totalAddCost;
      const totalDifferCost = totalHoldingCost - totalAddCost;
      const totalShares = holdingShares + additionalShares;
      this.result.afterPrice = -((totalDifferCost * additionalShares) / 1000);
      this.result.afterCount = holdingShares + additionalShares;
      this.result.afterCost = totalCost / totalShares;
    },
    getResult() {
      let result = this.calculateCurrentStockPrice(
        this.costing.ownPrice,
        this.costing.ownCount,
        this.costing.coverPrice,
        this.costing.coverCount
      );
      this.result.data = result;
      this.isUnlock = true;
    },
    submit() {
      if (this.costing.ownPrice == "") {
        this.global.toast("请输入持仓价");
        return;
      }
      if (this.costing.ownCount == "") {
        this.global.toast("请输入持仓股数");
        return;
      }
      if (this.costing.coverPrice == "") {
        this.global.toast("请输入补仓价");
        return;
      }
      if (this.costing.coverCount == "") {
        this.global.toast("请输入补仓股数");
        return;
      }
      if (!this.isUnlock) {
        showAdConfirmModal(() => {
          try {
            adVideoShow(() => {
              this.getResult();
            });
          } catch (error) {
            this.getResult();
          }
        });
      } else {
        this.getResult();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.banner {
  display: block;
  width: 100%;
}
.pub_radio {
  position: relative;
  padding-left: 50rpx;
}
.pub_radio:before {
  position: absolute;
  top: 50%;
  margin-top: -20rpx;
  left: 0;
  content: "";
  width: 40rpx;
  height: 40rpx;
  background-image: url("@/static/img/checked.png");
  background-size: cover;
}
.pub_radio.active:before {
  background-image: url("@/static/img/checked_active.png");
  background-size: cover;
}
.ind_from {
  background: #f9f5ef;
  margin-top: 20rpx;
  border: 4rpx solid #b39569;
  border-radius: 10rpx;
  .row {
    padding: 16rpx 20rpx;
    display: flex;
    border-bottom: 1px solid #ccc;
    &:last-child {
      border-bottom: 0;
    }
    .label {
      width: 190px;
      flex-shrink: 0;
    }
    .value {
      width: 100%;
      display: flex;
      input {
        width: 100%;
        display: inline-block;
        margin-right: 10px;
        background: #ccc;
        text-align: center;
      }
    }
    .pub_radio {
      display: inline-block;
      margin-right: 40rpx;
    }
  }
}
.btn {
  margin-top: 30rpx;
  background: #db0000;
  color: #fff;
  text-align: center;
  padding: 14rpx 0;
  border-radius: 10rpx;
}
.sub_text {
  text-align: center;
  padding-top: 30rpx;
  font-size: 24rpx;
  color: #666;
  .red {
    color: red;
  }
  .bold {
    font-weight: bold;
  }
}
.pub_ad_banner {
  margin-top: 30rpx;
}
.result {
  background: #f9f5ef;
  margin-top: 20rpx;
  border: 4rpx solid #b39569;
  border-radius: 10rpx;
  padding: 20px 10px;

  .title {
    text-align: center;
    font-size: 30px;
    margin-bottom: 10px;
  }
  .desc {
    font-size: 24px;
    text-align: left;
    .strong {
      color: #ff1afe;
    }
  }
}
</style>
